<template>
	<view class="content">
		<view class="top-bar">
			<view class="top-bar-left" @tap="ToUserdetai">
				<image :src="avatar"></image>
			</view>
			<view class="top-bar-center">
				<image src="../../static/img/index/火@2x.png" mode=""></image>
			</view>
			<view class="top-bar-right">
				<view class="search" @tap="toSearch">
					<image src="../../static/img/index/search.png" mode=""></image>
				</view>
				<view class="add" @tap="ToNewgroup">
					<image src="../../static/img/index/add.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="apply" @tap="ToFrinend" v-if="count!=0">
				<view class="friend-item-l">
					<text class="tip" >{{count}}</text>
					<image src="../../static/img/index/apply.png" mode=""></image>
				</view>
				<view class="friend-item-r">
					<view class="content-top">
						<text class="username">好友请求</text>
						<text class="time">{{DateFormate(time)}}</text>
					</view>
					<view class="content-bottom">
						<text class="message">海内存知己，天涯若比邻。</text>
					</view>
				</view>
			</view>
			<view class="friend-item" v-for="(item,i) in friends" :key="item.id" @tap="tochat(1,item,i)">
				<view class="friend-item-l">
					<text class="tip" v-if="item.tip&&item.tip!=0">{{item.tip}}</text>
					<image :src="item.avatar" mode=""></image>
				</view>
				<view class="friend-item-r">
					<view class="content-top">
						<text class="username">{{item.name}}</text>
						<text class="time" v-if="item.time">{{DateFormate(item.time)}}</text>
					</view>
					<view class="content-bottom">
						<text class="message" v-if="item.news">{{item.news}}</text>
					</view>
				</view>
			</view>
			<view class="friend-item" v-for="(item,i) in groups" :key="item.id" @tap="tochat(2,item,i)">
				<view class="friend-item-l">
					<text class="tip" v-if="item.tip&&item.tip!=0">{{item.tip}}</text>
					<image :src="item.avatar" mode=""></image>
				</view>
				<view class="friend-item-r">
					<view class="content-top">
						<text class="username">{{item.name}}</text>
						<text class="time" v-if="item.time">{{DateFormate(item.time)}}</text>
					</view>
					<view class="content-bottom">
						<text class="message" v-if="item.news">{{item.news}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import datas from '../../common/js/datas.js'
	import DateFormate from '../../common/js/DateFormate.js'
	import {mapState,mapActions} from 'vuex'
	export default {
		data() {
			return {
				friends: [],
				count:0,
				time:'',
				groups:[]
			}
		},
		onLoad() {
			this.getFriends()
			this.getnew()
			this.getGroup()
		},
		methods: {
			...mapActions([
				'changeFriendListaction',
				'changeNewFriendaction',
				'changegroupaction',
				'changechataction'
			]),
			async getFriends() {
				// this.friends = datas.friends()
			const {data}	= await this.request({
					url:'/friend/all',
					data:{
						id:this.id
					}
				})
				if(data.status==200){
					this.friends = data.data
					this.changeFriendListaction(this.friends)
				}
				this.getTip()
				console.log(this.friends);
			},
			async getGroup(){
				var {data} = await this.request({
					url:'/group/all',
					data:{
						id:this.id
					}
				})
				this.groups = data.data
				this.getgroupnews()
				// this.changegroupaction(this.groups)
			},
			DateFormate,
			toSearch() {
				uni.navigateTo({
					url: '/pages/search/search'
				})
			},
			ToUserdetai() {
				uni.navigateTo({
					url: '/pages/userdetai/userdetai?id='+this.id,
				})
			},
			ToNewgroup() {
				uni.navigateTo({
					url: '/pages/newgroup/newgroup'
				})
			},
			ToFrinend() {
				uni.navigateTo({
					url: '/pages/friendsrequest/friendsrequest'
				})
			},
			async getnew(){
				var {data} = await this.request({
					url:'/friend/new',
					data:{
						id:this.id
					}
				})
				this.changeNewFriendaction(data.data)
				this.count = data.data.length
				this.time = data.data[0]?.time||''
			},
			tochat(e,a,i){
				this.changechataction(a)
				if(e==1){
					var a = this.friends[i]
					a.tip = 0
					this.friends.splice(i,1,a)
					uni.navigateTo({
						url:'/pages/chatroom/chatroom?type=1'
					})
				}else{
					var a = this.groups[i]
					a.tip = 0
					this.groups.splice(i,1,a)
					uni.navigateTo({
						url:'/pages/chatroom/chatroom?type=2'
					})
				}
			},
			async getTip(){
				for(let i =0;i<this.friends.length;i++){
					var  {data} = await this.request({
						url:'/tip',
						data:{
							uid:this.id,
							fid:this.friends[i]._id
						}
					})
					if(data.status == 200){
						var a = this.friends[i]
						a.tip =data.count
						a.news = data.news
						if(data.time!=''){
							a.time = data.time
						}
						this.friends.splice(i,1,a)
					}
				}
			},
			async getgroupnews(){
				for(let i =0;i<this.groups.length;i++){
					var  {data} = await this.request({
						url:'/news',
						data:{
							gid:this.groups[i].groupId
						}
					})
					if(data.status == 200){
						var a = this.groups[i]
						a.news = data.news
						if(data.time!=''){
							a.time = data.time
						}
						this.groups.splice(i,1,a)
					}
				}
			}
		},
		computed: {
			...mapState([
				'username',
				'avatar',
				'id'
			])
		},
		onPullDownRefresh() {
			this.getFriends()
			this.getnew()
			this.getGroup()
			uni.stopPullDownRefresh()
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../common/css/base.scss";

	.top-bar {
		@include top-bar;
	}

	.list {
		padding-top: 106rpx;

		.friend-item,
		.apply {
			&:active {
				background-color: #F3F3F3;
			}

			width: 750rpx;
			height: 128rpx;
			box-sizing: border-box;
			// background: #F3F3F3;
			padding: 14rpx 32rpx 18rpx;
			display: flex;

			.friend-item-l {
				margin-right: 32rpx;
				position: relative;

				image {
					width: 96rpx;
					height: 96rpx;
					border-radius: 24rpx;
					border-radius: 24rpx;
					background-color: #FFE431;
				}

				.tip {
					position: absolute;
					top: -18rpx;
					right: -18rpx;
					height: 24rpx;
					min-width: 24rpx;
					padding: 6rpx;
					background: #FF5D5B;
					border-radius: 18rpx;
					z-index: 10;
					// margin: auto;
					text-align: center;
					line-height: 24rpx;
				}

				text {
					color: #FFF;
					font-size: 22rpx
				}
			}

			.friend-item-r {
				width: 654rpx;

				.username {
					font-family: PingFangSC-Regular;
					font-size: 36rpx;
					color: #272832;
					letter-spacing: -0.62rpx;
					font-weight: 400;
				}

				.time {
					float: right;
					font-family: PingFangSC-Regular;
					font-size: 24rpx;
					color: rgba(39, 40, 50, 0.40);
					letter-spacing: -0.41rpx;
					font-weight: 400;
					max-width: 200rpx;
					white-space: nowrap;
					overflow: hidden;
				}

				.message {
					font-family: PingFangSC-Regular;
					font-size: 28rpx;
					// color: rgba(39, 40, 50, 0.60);
					color: rgba(39, 40, 50, 0.40);
					letter-spacing: -0.48rpx;
					font-weight: 400;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
				}
			}
		}
	}
</style>
